<extend name='Public/demo' />

<block name='body'> <!-- 为登录页面准备的块标签 S -->

<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Bg/css/component.css" />
<div class="container" style='width: 100%'>
        <div id="large-header" class="large-header" >
              <form class="form-signin"  style="position: absolute;left:50%;">
        <h2 class="form-signin-heading">P<sup>6</sup> 管理员登录</h2>
        <div class="login-wrap">
            <input type="hidden" name="key" value="">
            <input type="text" name="username" class="form-control" placeholder="用户帐号" autofocus="">
            <input type="password" name="password" class="form-control" placeholder="用户密码">
            <div id="embed-captcha"></div>
            <p id="wait" class="show">正在加载验证码......</p>
            <p id="notice" class="hide">请先拖动验证码到相应位置</p>
            <hr>
            <input type='button' class="btn btn-lg btn-login btn-block trigger" data-dialog="somedialog" value ="提交">
            <!-- <p style='font-size:12px;'>欢迎来到P<sup>6</sup>这个大家庭! 希望你在这里能找到快乐<br>--from:项目组--</p> -->
            <p>
              <!-- <a href="{:U('Login/repwd')}" class="btn btn-success btn-xs" style="color:#fff">忘记密码?</a> -->
              <!-- <a href="{:U('Login/signup')}" class="btn btn-success btn-xs" style="color:#fff">点击注册</a> -->
              <!-- <button class="btn btn-default btn-xs">用户须知</button> -->
            </p>
        </div>
      </form>
          <canvas id="demo-canvas"></canvas>
        </div>

    </div>

    <script src="__PUBLIC__/Bg/js/TweenLite.min.js"></script>
    <script src="__PUBLIC__/Bg/js/EasePack.min.js"></script>
    <script src="__PUBLIC__/Bg/js/rAF.js"></script>
    <script src="__PUBLIC__/Bg/js/demo-1.js"></script>

    <script type="text/javascript">
      $('.container').parent().addClass('Bg');

      //让表单居中   $('.form-signin').width() / 2
      $('.form-signin').css('marginLeft', -$('.form-signin').width() / 2);

    </script>



  <!-- 极验验证 -->
    <script>

        var handlerEmbed = function (captchaObj) {
            $(".trigger").click(function (e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    $('.htmlstr').html('请验证!');
                    $("#notice")[0].className = "show";
                    setTimeout(function () {
                        $("#notice")[0].className = "hide";
                    }, 2000);
                    e.preventDefault();
                }else{
                    pd[2] ='true';
                  $.post("{$ajaxurl}",{pd:pd},function(data){
                    if (data =='yes') {
                          $('.htmlstr').html('{$yesstr}');
                          location.href = "{:U('Index/index')}";
                    }else if(data =='no'){
                          $('.htmlstr').html('{$nostr}');
                    }else{
                        $('.htmlstr').html('{$lesstr}');
                    }
                  });
                }


            });

            // 将验证码加到id为captcha的元素里
            captchaObj.appendTo("#embed-captcha");
            captchaObj.onReady(function () {
                $("#wait")[0].className = "hide";
            });
            // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
        };
        $.ajax({
            // 获取id，challenge，success（是否启用failback）
            // url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加随机数防止缓存
            url: "{:U('Login/jyan')}?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
                // 使用initGeetest接口
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                    offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                }, handlerEmbed);
            }
        });
    </script>

    <script type="text/javascript">
        var pd = new Array();
      $('.trigger').click(function(){
        pd[0] = $('input[name=username]').val();
        pd[1] = $('input[name=password]').val();
      });
    </script>

</block>

    <block name='pdajax'>
        <script>
                      (function() {
                            var alertstr = document.getElementsByClassName('alertstr')[0];
                            var dlgtrigger = document.querySelector( '[data-dialog]' ),
                            somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
                            dlg = new DialogFx( somedialog );

                            dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
                      })();
        </script>
    </block>
